<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航栏练习</title>
    <link rel="stylesheet" href="./personal.css" />
  </head>
  <body>
    <div id="nav">
      <div class="container" id="my-container">
        <div style="width: 10%">
          <img
            src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
            alt=""
          />
        </div>

        <div style="width: 50%">
          <span>首页</span>
          <span>沸点</span>
          <span>课程</span>
          <span>直播</span>
          <span>资讯</span>
          <span>活动</span>
          <span>开放社区</span>
          <span>商城</span>
          <span>APP</span>
          <span>插件</span>
        </div>

        <div style="width: 30%">
          <div>
            <input type="text" placeholder="探索稀土掘金" id="nav_inp"/>
            <button></button>
          </div>
          <button>创作者中心</button>
        </div>

        <div style="width: 10%">
          <button>登录</button>
        </div>
      </div>
    </div>

    <!-- 第二层 -->
    <div id="nav_2">
      <div class="container">
        <ul>
          <li>综合</li>
          <li>后端</li>
          <li>前端</li>
          <li>Android</li>
          <li>iOS</li>
          <li>人工智能</li>
          <li>开发工具</li>
          <li>代码人生</li>
          <li>阅读</li>
        </ul>
      </div>
    </div>

    <script src="./personal.js"></script>
  </body>
</html>
